<template>
  <div>
    <!-- 高级检索框 -->
    <div v-show="state.searchVisible" class="top-search">
      <el-form ref="advancedSearchRef" :model="state.advancedSearch">
        <el-row :gutter="20" style="margin-bottom: 10px">
          <el-col>
            <span class="textCss">名字 :</span>
            <el-input
              v-model="state.advancedSearch.name"
              prop="name"
              placeholder="名字"
              style="width: 230px"
            >
            </el-input>
            <span class="textCss">年龄 :</span>
            <el-input
              v-model="state.advancedSearch.age"
              prop="year"
              placeholder="年龄"
              style="width: 230px"
            >
            </el-input>
            <span class="textCss">身份证 :</span>
            <el-input
              v-model="state.advancedSearch.idCard"
              prop="loginNumber"
              placeholder="身份证"
              style="width: 230px"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <span class="textCss">性别 :</span>
            <el-select v-model="state.advancedSearch.sex" placeholder="性别">
              <el-option
                v-for="item in state.selectData.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="footer-button">
              <el-button type="primary" plain @click="allSearch"
                >查询</el-button
              >
              <el-button type="info" plain @click="reset">重 置</el-button>
              <el-button @click="state.searchVisible = false">关 闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 顶部功能按钮开始 -->
    <el-header class="top_button">
      <div class="left-panel">
        <el-button type="success" plain @click="state.addDialogVisible = true"
          >新增</el-button
        >
        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="warning" plain @click="exportInfo()">导出</el-button>
        <el-button type="primary" plain>导入</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input
              v-model="state.searchKey"
              placeholder="查询内容"
              class="input-with-select"
            >
              <template #prepend>
                <el-select
                  v-model="state.selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="姓名" />
                  <el-option label="性别" value="性别" />
                  <el-option label="年龄" value="年龄" />
                  <el-option label="身份证" value="身份证" />
                  <el-option label="出生日期" value="出生日期" />
                  <el-option label="政治面貌" value="政治面貌" />
                  <el-option label="婚姻状况" value="婚姻状况" />
                  <el-option label="曾用名" value="曾用名" />
                  <el-option label="学历" value="学历" />
                  <el-option label="民族" value="民族" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                  @click="search"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="state.searchVisible = true"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <MyTable
      stripe
      :columns="state.columns"
      ref="tableRef"
      :data="state.allList"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ color: '#666', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :fit="true"
      style="width: 100%; font-size: 14px"
      tooltip-effect="dark"
    >
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in state.columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          width="180"
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scoped">
          <el-button
            type="text"
            size="small"
            @click="update(scoped.row)"
            style="color: orange"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="del(scoped.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </MyTable>
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        v-model:currentPage="state.pageInfo.currentPage"
        v-model:page-size="state.pageInfo.pageSize"
        :page-sizes="[10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 分页区结束 -->
    <!-- 修改兵役信息弹窗开始 -->
    <el-dialog
      v-model="state.updateDialogVisible"
      title="兵役登记信息"
      width="50%"
    >
      <el-descriptions column="2" border size="big">
        <el-descriptions-item label="姓名">
          <el-input v-model="state.updateInfo.name" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-select v-model="state.updateInfo.sex">
            <el-option
              v-for="item in state.selectData.sex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          <el-input v-model="state.updateInfo.idCard" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="民族">
          <el-select v-model="state.updateInfo.nation" placeholder="民族">
            <el-option
              v-for="item in state.selectData.nation"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          <el-select v-model="state.updateInfo.education" placeholder="学历">
            <el-option
              v-for="item in state.selectData.education"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="曾用名">
          <el-input
            v-model="state.updateInfo.beforeName"
            placeholder="请输入"
          />
        </el-descriptions-item>
        <el-descriptions-item label="出生日期">
          <el-date-picker
            v-model="state.updateInfo.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="政治面貌">
          <el-select
            v-model="state.updateInfo.poliStatus"
            placeholder="政治面貌"
          >
            <el-option
              v-for="item in state.selectData.poliStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="婚姻状况">
          <el-select
            v-model="state.updateInfo.marriageCondition"
            placeholder="婚姻状况"
          >
            <el-option
              v-for="item in state.selectData.marriageCondition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          <el-input v-model="state.updateInfo.age" placeholder="请输入" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updateConfirm">确认</el-button>
          <el-button type="warning" @click="state.updateDialogVisible = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 修改兵役信息弹窗结束 -->
    <!-- 删除兵役信息弹窗 -->
    <el-dialog
      v-model="state.delDialogVisible"
      title="删除确定"
      width="30%"
      :before-close="handleClose"
    >
      <span>是否确认删除该条数据?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.delDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="delConfirm()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 删除兵役信息弹窗结束 -->

    <!-- 新增兵役信息开始 -->
    <el-dialog
      v-model="state.addDialogVisible"
      title="兵役登记信息"
      width="50%"
    >
      <el-descriptions column="2" border size="big">
        <el-descriptions-item label="姓名">
          <el-input v-model="state.addInfo.name" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-select v-model="state.addInfo.sex">
            <el-option
              v-for="item in state.selectData.sex"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          <el-input v-model="state.addInfo.idCard" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="民族">
          <el-select v-model="state.addInfo.nation" placeholder="民族">
            <el-option
              v-for="item in state.selectData.nation"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          <el-select v-model="state.addInfo.education" placeholder="学历">
            <el-option
              v-for="item in state.selectData.education"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="曾用名">
          <el-input v-model="state.addInfo.beforeName" placeholder="请输入" />
        </el-descriptions-item>
        <el-descriptions-item label="出生日期">
          <el-date-picker
            v-model="state.addInfo.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="政治面貌">
          <el-select v-model="state.addInfo.poliStatus" placeholder="政治面貌">
            <el-option
              v-for="item in state.selectData.poliStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="婚姻状况">
          <el-select
            v-model="state.addInfo.marriageCondition"
            placeholder="婚姻状况"
          >
            <el-option
              v-for="item in state.selectData.marriageCondition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          <el-input v-model="state.addInfo.age" placeholder="请输入" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addConfirm()">确认</el-button>
          <el-button type="warning" @click="state.addDialogVisible = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 新增兵役信息结束 -->
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  getRegisterInfo,
  updateRegister,
  delSingleRegister,
  exportRegisterInfo,
  addRegisterInfo,
  allSearchInfo,
  searchName,
  delBatchRegister,
} from "@/api/miliService/register";

//   类似vue2的data
const state = reactive({
  // 高级查询
  fiexdSearchForm: false,
  columns: [
    { name: "姓名", show: true, prop: "name" },
    { name: "性别", show: true, prop: "sex" },
    { name: "年龄", show: true, prop: "age" },
    { name: "身份证", show: true, prop: "idCard" },
    { name: "出生日期", show: true, prop: "birthday" },
    { name: "曾用名", show: true, prop: "beforeName" },
    { name: "民族", show: true, prop: "nation" },
    { name: "政治面貌", show: true, prop: "poliStatus" },
    { name: "学历", show: true, prop: "education" },
    { name: "婚姻状况", show: true, prop: "marriageCondition" },
  ],
  allList: [],
  //分页数据
  pageInfo: {
    currentPage: 1,
    pageSize: 10,
  },
  total: 1,
  // 修改的兵役数据
  updateInfo: {
    age: "string",
    beforeName: "string",
    bingyiInfoId: "string",
    birthday: "string",
    createBy: "string",
    domicileCity: "string",
    domicileDistrict: "string",
    domicileProvince: "string",
    domicileTown: "string",
    education: "string",
    householdType: "string",
    idCard: "string",
    isRegister: "string",
    marriageCondition: "string",
    name: "string",
    nation: "string",
    nativeDistinct: "string",
    nativeProvince: "string",
    nativeTown: "string",
    poliStatus: "string",
    sex: "string",
  },
  updateDialogVisible: false,
  // 高级检索
  searchVisible: false,
  advancedSearch: {
    name: " ",
    age: " ",
    idCard: " ",
    sex: " ",
  },
  // 姓名检索
  searchKey: "",
  selectField: "",

  // 下拉框选择数据
  selectData: {
    // 性别
    sex: [
      {
        value: "男",
        label: "男",
      },
      {
        value: "女",
        label: "女",
      },
    ],
    // 民族
    nation: [
      {
        value: "汉族",
        label: "汉族",
      },
      {
        value: "回族",
        label: "回族",
      },
    ],
    // 政治面貌
    poliStatus: [
      {
        value: "中共党员",
        label: "中共党员",
      },
      {
        value: "中共预备党员",
        label: "中共预备党员",
      },
      {
        value: "共青团员",
        label: "共青团员",
      },
      {
        value: "民革党员",
        label: "民革党员",
      },
      {
        value: "民盟盟员",
        label: "民盟盟员",
      },
      {
        value: "民建会员",
        label: "民建会员",
      },
      {
        value: "民进会员",
        label: "民进会员",
      },
      {
        value: "农工党党员",
        label: "农工党党员",
      },
      {
        value: "致公党党员",
        label: "致公党党员",
      },
      {
        value: "九三学社社员",
        label: "九三学社社员",
      },
      {
        value: "台盟盟员",
        label: "台盟盟员",
      },
      {
        value: "无党派人士",
        label: "无党派人士",
      },
      {
        value: "群众",
        label: "群众",
      },
    ],
    // 学历
    education: [
      {
        value: "小学",
        label: "小学",
      },
      {
        value: "初中",
        label: "初中",
      },
      {
        value: "高中",
        label: "高中",
      },
      {
        value: "大专",
        label: "大专",
      },
      {
        value: "大学本科",
        label: "大学本科",
      },
      {
        value: "研究生",
        label: "研究生",
      },
    ],
    // 婚姻状况
    marriageCondition: [
      {
        value: "已婚",
        label: "已婚",
      },
      {
        value: "未婚",
        label: "未婚",
      },
      {
        value: "离异",
        label: "离异",
      },
      {
        value: "丧偶",
        label: "丧偶",
      },
    ],
  },
  // 删除弹窗控制
  delDialogVisible: false,
  delInfo: {},
  addDialogVisible: false,
  addInfo: {},
  // 批量删除
  removeByIds: [],
});
onMounted(() => {
  getRegisterData();
});
// 编辑表单开始结束  后面改
// const changeColumn = function (columns) {
//   this.columns = columns;
//   // this.$refs.table.doLayout()
// };
// 分页获取兵役信息
const getRegisterData = async function () {
  // 分页获取兵役信息
  var res = await getRegisterInfo.get(state.pageInfo);
  if (res.statusCode == 20000) {
    state.allList = res.data.records;
    state.total = res.data.total;
  }
};
// 编辑兵役信息
const update = function (e) {
  state.updateDialogVisible = true;
  console.log(e);
  (state.updateInfo.age = e.age),
    (state.updateInfo.beforeName = e.beforeName),
    (state.updateInfo.bingyiInfoId = e.bingyiInfoId),
    (state.updateInfo.birthday = new Date(e.birthday).toISOString()),
    (state.updateInfo.education = e.education),
    (state.updateInfo.idCard = e.idCard),
    (state.updateInfo.isRegister = e.isRegister),
    (state.updateInfo.marriageCondition = e.marriageCondition),
    (state.updateInfo.name = e.name),
    (state.updateInfo.nation = e.nation),
    (state.updateInfo.poliStatus = e.poliStatus),
    (state.updateInfo.sex = e.sex);
};
// 确定修改编译的兵役信息
const updateConfirm = async function () {
  var res = await updateRegister.put(state.updateInfo);
  console.log(res);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    getRegisterData();
    state.updateDialogVisible = false;
  } else {
    ElMessage.error("修改出错，请稍后重试！");
  }
  // console.log('修改之后的信息',state.updateInfo)
};
// 姓名检索
const search = async function () {
  var res = await searchName.post(state.searchKey);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    state.allList = res.data;
    state.total = res.data.length;
  }
};
// 高级检索
const allSearch = async function () {
  var res = await allSearchInfo.post(state.advancedSearch);
  console.log(res, "高级检索");
  if (res.code === 200) {
    ElMessage.success(res.msg);
    state.allList = res.data;
    state.total = res.data.length;
  }
};
// 删除信息弹窗
const del = function (e) {
  state.delDialogVisible = true;
  state.delInfo = e;
};
// 确认删除兵役信息
const delConfirm = async function () {
  var res = await delSingleRegister.delete(state.delInfo.bingyiInfoId);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    getRegisterData();
    state.delDialogVisible = false;
  } else {
    ElMessage.error("删除出错，请稍后重试！");
  }
};
// 批量删除兵役信息
const deleteByIds = async function () {
  var res = await delBatchRegister.delete(state.removeByIds);
  if (res.code === 200) {
    state.removeByIds = [];
    ElMessage.success(res.msg);
    getRegisterData();
  } else {
    state.removeByIds = [];
    ElMessage.error("删除出错，请稍后重试！");
  }
};
// 重置高级检索表单
const reset = function () {
  state.advancedSearch = {};
};
// 确认新增兵役信息
const addConfirm = async function () {
  var res = await addRegisterInfo.post(state.addInfo);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    getRegisterData();
    state.addDialogVisible = false;
  } else {
    ElMessage.error("删除出错，请稍后重试！");
  }
};
// 导出兵役信息
const exportInfo = async function () {
  let blobUrl = await exportRegisterInfo();
  const a = document.createElement("a");
  a.style.display = "none";
  a.download = "兵役登记信息";
  a.href = blobUrl;
  a.click();
  a.remove();
  ElMessage.success("导出成功");
};
//
// 分页监控
// 条数
const handleSizeChange = function () {
  getRegisterData();
};
// 页数
const handleCurrentChange = function () {
  getRegisterData();
};
//多选内容
const handleSelectionChange = function (val) {
  console.log("多选", val);
  val.forEach((item, index) => {
    state.removeByIds[index] = item.bingyiInfoId;
    // console.log(state.removeByIds)
  });
  console.log(state.removeByIds);
};
// 确定关闭弹窗
const handleClose = function (done) {
  ElMessageBox.confirm("是否关闭该弹窗？")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
</script>

<style scoped>
.form-closex {
  display: flex;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top-search {
  width: 100%;
  margin-top: 10px;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
}
.top-search .inputCss {
  width: 210px;
}
.btnModel {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 30px;
  /* margin-right: 5px; */
}
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.footer-button {
  margin-left: 80px;
  display: inline-block;
}
.top_button {
  display: flex;
  justify-content: space-between;
}
</style>



